<template>
    <view>
            <view class="textarr" @click="textarrclickimg">
                <view class="ulclass">
                    <view class="textandimg">
                        <image :class="{img:true, imgrotate: textshow}" src="../../static/img/myhome/more@3x.png">
                        </image>
                        <p class="p">
                            {{texts.index+1+'、'}}{{texts.itemson.title}}
                        </p>
                    </view>
                    <view v-if="textshow" class="showText" v-html="texts.itemson.content"></view>
                </view>
            </view>
    </view>
</template>

<script>
    export default {
        created() {
            
        },
        props: ['texts'],
        data() {
            return {
                textshow: false
            }
        },
        methods: {
            // 控制下拉显示
            textarrclickimg() {
                this.textshow = !this.textshow
            }
        }
    }
</script>

<style lang="scss" scoped>
        .textarr {
            margin-left: 50rpx;
        
            .ulclass {
                width: 466rpx;
            }
        
            .showText {
                width: 466rpx;
                // height: 152rpx;
                background-color: #f2f2f2;
                border-radius: 20rpx;
                padding: 30rpx;
                box-sizing: border-box;
                margin-bottom: 30rpx;
        
                font-size: 24rpx;
                color: #999999;
            }
        
            .textandimg {
                line-height: 88rpx;
        
                .p {
                    height: 88rpx;
                    font-size: 28rpx;
                    color: #191919;
                }
        
                .img {
                    float: right;
                    width: 25rpx;
                    height: 25rpx;
                    margin-top: 34rpx;
                }
                
                .imgrotate {
                    transform: rotate(90deg);
                }
                
            }
        
        
            .p {
                height: 88rpx;
                font-size: 28rpx;
                color: #191919;
            }
        
            .img {
                float: right;
                width: 25rpx;
                height: 25rpx;
            }
        }
</style>
